<template>
  <div class="date-wrapper">
    <!-- style="width: 160px" -->
    <el-date-picker v-model="form.startTime" placeholder="选择开始日期" :clearable="clearable" :type="typeData" :value-format="format" @change="changeStartTime"></el-date-picker>
    <span style="padding: 0 1px">至</span>
    <el-date-picker v-model="form.endTime" placeholder="选择结束日期" :type="typeData" :clearable="clearable" :value-format="format" @change="changeEndTime"></el-date-picker>
  </div>
</template>
<script>
export default {
  name: 'datePicker',

  props: {
    form: {
      type: Object,
      default: function () {
        return {
          endTime: '',
          startTime: ''
        };
      }
    },

    typeData: {
      type: String,
      default: 'date'
    },
    format: {
      type: String,
      default: 'yyyy-MM-dd'
    },
    clearable: {
      type: Boolean,
      default: false
    }
  },
  computed: {},
  data() {
    return {};
  },

  methods: {
    changeStartTime(val) {
      this.form.startTime = val;

      this.form.startTime = val === null ? '' : val;
      if (this.form.endTime) {
        let enactDateBeginText = new Date(this.form.startTime).getTime();
        let enactDateEndText = new Date(this.form.endTime).getTime();
        if (enactDateBeginText > enactDateEndText) {
          this.$message.error('开始时间不得大于结束时间,请重新选择!');
          this.form.startTime = '';
        }
      }
      this.$emit('changeData', this.form);
    },
    changeEndTime(val) {
      this.form.endTime = val;

      this.form.endTime = val === null ? '' : val;
      if (this.form.startTime) {
        let enactDateBeginText = new Date(this.form.startTime).getTime();
        let enactDateEndText = new Date(this.form.endTime).getTime();
        if (enactDateBeginText > enactDateEndText) {
          this.$message.error('结束时间不可小于开始时间,请重新选择!');
          this.form.endTime = '';
        }
      }
      this.$emit('changeData', this.form);
    }
  }
};
</script>
<style lang="scss" scoped>
.date-wrapper {
  display: flex;
  justify-content: flex-start;
  vertical-align: center;

  .el-date-editor {
    // width: 300px;
    .el-input__inner {
      padding: 0px 0px 0 10px !important;
    }

    .el-input__prefix {
      display: none;
    }

    .el-input__suffix {
      text-align: right;
    }
  }
}
</style>
